<template>
    <div class="jianlibox">
        <div class="headtop">
        <div class="headtopleft">
            <div class="headtopimg">
                <img src="../../assets/img/myself.png" alt="">
            </div>
            <button style="margin-bottom:.2rem">预览简历</button>
             <button style="color:brown">下载简历</button>
        </div>
        <div class="headtopright">
            <p>
                <span @click="goaddresume" style="float:right;color: brown;" class="iconfont icon-bianji"></span>
            </p>
            <p>

                <span v-html="id!=''?arr.names:''"></span><span v-html="arr.gender=='男'?`先生`:`女士`" style="margin-right:.3rem"></span>
                <span v-html="id!=''?arr.birth:''"></span><span >岁</span>
            </p>
            <p>联系方式：<span v-html="id!=''?arr.annualincome:''"></span></p>
            <p>电子邮件：<span v-html="id!=''?arr.email:''"></span></p>
            <p class="l-l"></p>
        </div>
    </div>
    <div class="headadd">
        <div class="qiuzhiyixiang">
            <div>
                <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">求职意向</span>
                <span @click="jobintention" style="float:right;color: brown;" class="iconfont icon-bianji">编辑</span>
            </div>
            <div>意向职位:&nbsp;&nbsp;&nbsp;{{objs.zhiwei}}</div><div>意向地区:&nbsp;&nbsp;&nbsp;{{objs.cityss}}</div><div>期望月薪:&nbsp;&nbsp;&nbsp;{{objs.wantmonthmoney}}</div><div>期望年薪:&nbsp;&nbsp;&nbsp;{{objs.wantyearmoney}}</div>
            <div>求职状态:&nbsp;&nbsp;&nbsp;{{objs.zhuangtai}}</div><div>求职类型:&nbsp;&nbsp;&nbsp;{{objs.leixin}}</div><div>到岗时间:&nbsp;&nbsp;&nbsp;{{objs.gotime}}</div>
        </div>
        <div class="qitajingli">
            <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">教育经历</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">工作/实习经历</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">规培经历</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">专业技术资格</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">核心节能/自我评价</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">社会任职</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">发表论文</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">学术/科研课题</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">获奖情况</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
              <div class="div">
                <p style="margin-bottom:.01rem;border-bottom:.01rem solid #ccc">
                    <span style="font-size:.4rem; line-height: .4rem; font-weight: 700;">其他</span>
                    <span style="float:right;color: brown;" class="iconfont icon-zengjia">添加</span>
                </p>
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{

        }
    },
    methods:{
        goaddresume(){
            this.$router.push("/addresume")
        },
        jobintention(){
            this.$router.push("/jobintention")
        }
    },
    computed:{
    ...mapState(['arr',"objs","id"])
    }
}
</script>

<style scoped>

.headtop{
    width: 100%;
    height: 3.64rem;
    background-color: white;
    display: flex;
    margin-bottom: .3rem;
}
.headtopleft{
    width: 1.75rem;
    height: 100%;
    display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.headtopimg{
    margin-bottom: .2rem;
}
.headtopimg>img{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}
.headtopright{
     flex: 1;
     width: 100%;
     height: 100%;
     font-size: .2rem;
     padding: .3rem;
}
.headtopright>p{
    margin-bottom: .3rem;
}
.l-l{
    display: block;
    content: "";
    height: .03rem;
    background-color: black;
}
.headadd{
      width: 100%;
     height: 100%;
}
.qiuzhiyixiang{
    width: 100%;
    height: 6rem;
    font-size: .3rem;
    display: flex;
    flex-direction: column;
    padding: .3rem;
    margin-bottom: .2rem;
    background-color: white;
}
.qiuzhiyixiang>div{
    flex: 1;
    margin-bottom:.03rem;
    line-height: .7rem;
}
.qitajingli{
    width: 100%;
    height: 100%;
}
.div{
    width: 100%;
    height: 1.6rem;
    margin-bottom: .1rem;
    display: flex;
    line-height: .8rem;
    font-size: .3rem;
    justify-items: center;
    flex-direction: column;
    background-color: white;
    padding: 0rem .3rem;
}
</style>